<template>
    <div style="background: #f4f4f4;">
      <div style="margin: 0 auto; width: 60%; padding: 25px">
        <div class="app-container">
          <h2>课程名称：{{formData.courseName}}</h2>
          <h3>{{ formData.examName }} (满分：{{ formData.fullScore }})</h3>
          <el-form
              ref="ruleForm"
              :model="formData"
              :rules="rules"
              label-width="100px"
              class="demo-ruleForm"
          >
            <h4>单选题({{ formData.examOneScore }}分/题)</h4>
            <div v-for="item in formData.one">
              <span style="display: block">题目：{{item.content}}</span>
              <span style="display: block; margin-top: 5px">A：{{item.options.split(",")[0]}}</span>
              <span style="display: block; margin-top: 5px">B：{{item.options.split(",")[1]}}</span>
              <span style="display: block; margin-top: 5px">C：{{item.options.split(",")[2]}}</span>
              <span style="display: block; margin-top: 5px">D：{{item.options.split(",")[3]}}</span>
              <span style="display: block; margin-top: 5px; margin-bottom: 25px"> 选项：
                <el-radio v-model="item.sa" label="A" disabled>A</el-radio>
                <el-radio v-model="item.sa" label="B" disabled>B</el-radio>
                <el-radio v-model="item.sa" label="C" disabled>C</el-radio>
                <el-radio v-model="item.sa" label="D" disabled>D</el-radio>
              </span>
              <span style="color: green; margin-bottom: 20px; display: block">正确答案：{{item.answer}}</span>
            </div>
  
            <h4>多选题({{ formData.examTwoScore }}分/题)</h4>
            <div v-for="item in formData.two">
              <span style="display: block">题目：{{item.content}}</span>
              <span style="display: block; margin-top: 5px">A：{{item.options.split(",")[0]}}</span>
              <span style="display: block; margin-top: 5px">B：{{item.options.split(",")[1]}}</span>
              <span style="display: block; margin-top: 5px">C：{{item.options.split(",")[2]}}</span>
              <span style="display: block; margin-top: 5px">D：{{item.options.split(",")[3]}}</span>
              <span style="margin-top: 5px; margin-bottom: 25px"> 选项：
                 <el-checkbox-group v-model="item.ma" @change="handleCheckedCitiesChange">
                    <el-checkbox label="A" disabled>A</el-checkbox>
                    <el-checkbox label="B" disabled>B</el-checkbox>
                    <el-checkbox label="C" disabled>C</el-checkbox>
                    <el-checkbox label="D" disabled>D</el-checkbox>
                  </el-checkbox-group>
              </span>
              <span style="color: green; margin-bottom: 20px;margin-top: 20px; display: block">正确答案：{{item.answer}}</span>
            </div>
            <h4>判断选题({{ formData.examThreeScore }}分/题)</h4>
            <div v-for="item in formData.three">
              <span style="display: block">题目：{{item.content}}</span>
              <span style="display: block; margin-top: 5px">A：{{item.options.split(",")[0]}}</span>
              <span style="display: block; margin-top: 5px">B：{{item.options.split(",")[1]}}</span>
              <span style="display: block; margin-top: 5px; margin-bottom: 25px"> 选项：
                <el-radio v-model="item.sa" label="A" disabled>正确</el-radio>
                <el-radio v-model="item.sa" label="B" disabled>错误</el-radio>
              </span>
              <span style="color: green; margin-bottom: 20px; display: block">正确答案：{{item.answer}}</span>
            </div>
            <el-form-item>
              <el-button style="margin-left: 200px;" type="primary" @click="submitForm()">关闭</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import store from "@/store";
  import {getObj} from "@/api/student/examstudent";
  
  export default {
    name: "info",
    data() {
      return {
        checkedData: [],
        headers: {
          Authorization: "Bearer " + store.getters.token,
        },
        formData: {
          id: '',
          one: [],
          two: [],
          three: [],
          examOneScore: "",
          examTwoScore: "",
          examThreeScore: "",
          fullScore: "",
          examName: "",
          examId: "",
        },
        rules: {}
      };
    },
    created() {
      this.getExamItem();
    },
    methods: {
      getExamItem() {
        getObj( this.$route.params.id).then((res) => {
          this.formData = JSON.parse(res.data.answer)
        })
      },
      submitForm() {
        this.$router.push({path: "/s/achievement"})
      },
      handleCheckedCitiesChange() {
  
      }
    },
  };
  </script>
  <style lang="scss">
  </style>
  